<!-- 消息框组件 -->
<template>
    <div class="message-box" v-if="visible">
        <div class="message-content">
            <div class="message-text">{{ message }}</div>
            <div class="message-buttons">
                <button class="cancel-btn" @click="handleCancel">取消</button>
                <button class="confirm-btn" @click="handleConfirm">确定</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const visible = ref(false);
const message = ref('');
const onConfirm = ref(null);

// 显示消息
const show = (msg, callback) => {
    message.value = msg;
    onConfirm.value = callback;
    visible.value = true;
};

// 隐藏消息
const hide = () => {
    visible.value = false;
    onConfirm.value = null;
};

// 确认按钮处理
const handleConfirm = () => {
    if (onConfirm.value) {
        onConfirm.value();
    }
    hide();
};

// 取消按钮处理
const handleCancel = () => {
    hide();
};

// 暴露方法给父组件
defineExpose({
    show,
    hide
});
</script>

<style lang="less" scoped>
.message-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    .message-content {
        width: 80%;
        max-width: 600px;
        background-color: #fff;
        border-radius: 20px;
        padding: 40px;
        box-sizing: border-box;

        .message-text {
            font-size: 32px;
            color: #333;
            text-align: center;
            margin-bottom: 40px;
            word-break: break-all;
        }

        .message-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;

            .confirm-btn, .cancel-btn {
                width: 200px;
                height: 80px;
                border: none;
                border-radius: 40px;
                font-size: 32px;
                cursor: pointer;
                transition: all 0.3s ease;

                &:active {
                    transform: scale(0.95);
                }
            }

            .confirm-btn {
                background-color: #fb8fae;
                color: #fff;

                &:active {
                    background-color: darken(#fb8fae, 10%);
                }
            }

            .cancel-btn {
                background-color: #f5f5f5;
                color: #666;

                &:active {
                    background-color: darken(#f5f5f5, 10%);
                }
            }
        }
    }
}
</style> 